import React, { Component } from "react";
import { Link, Route } from "react-router-dom";

import Deatil from "./components";

export default class Message extends Component {
  state = {
    messageArr: [
      { id: "001", title: "消息1" },
      { id: "002", title: "消息2" },
      { id: "003", title: "消息3" },
    ],
  };

  render() {
    return (
      <>
        <ul>
          {this.state.messageArr.map((item) => {
            return (
              <li key={item.id}>
                <Link to={`/home/message/detail/${item.id}/${item.title}`}>
                  {item.title}
                </Link>
                &nbsp;&nbsp;
              </li>
            );
          })}
        </ul>
        <hr />
        <Route path="/home/message/detail/:id/:title" component={Deatil} />
      </>
    );
  }
}
